<script setup>
import {onMounted, reactive, ref} from "vue";
import {noticeStore} from '@pi/notice';
import {userStore} from '@pi/user';

let notice = noticeStore();
let user = userStore();
let options = reactive({
    pageNo: 1,
    pageSize: 10,
    title: '',
});
let dialog = reactive({
    show: false,
    loading: false,
    type: 0,
    form: {},
    rules: {
        title: {required: true, message: '请输入标题', trigger: 'blur'},
        content: {required: true, message: '请输入内容', trigger: 'blur'},
    },
    open(type = 0, e = {uid: user.info.id}) {
        dialog.type = type;
        dialog.form = {...e};
        dialog.show = true;
    },
    close() {
        dialog.show = false;
        dialog.loading = false;
        formRef.value.resetFields();
    }
});
let formRef = ref(null);
let info = reactive({
    show: false,
    row: {},
    open(e) {
        info.row = {...e};
        info.show = true;
    }
});

// 刷新
function refresh() {
    options.pageNo = 1;
    options.title = '';
    notice.get(options);
}

// 添加 or 修改
function submit() {
    formRef.value.validate(async e => {
        if (e) {
            let form = {...dialog.form};
            delete form.user;
            dialog.loading = true;
            await notice[dialog.type ? 'update' : 'create'](form);
            dialog.close();
            notice.get(options);
        }
    });
}

// 删除
async function remove(id) {
    await notice.remove(id);
    notice.get(options);
}

onMounted(() => {
    notice.get(options);
})
</script>

<template>
    <h5 class="title">公告管理</h5>
    <el-form :model="options" inline size="small">
        <el-form-item label="公告标题">
            <el-input v-model="options.title" placeholder="请输入公告标题" />
        </el-form-item>
        <el-form-item>
            <el-button type="primary" plain icon="Search" @click="notice.get(options)">搜索</el-button>
            <el-button type="warning" icon="Refresh" plain @click="refresh">刷新</el-button>
            <el-button type="success" icon="Plus" plain @click="dialog.open()" v-if="user.info.role < 2">发布</el-button>
        </el-form-item>
    </el-form>
    <el-table :data="notice.list" style="height: calc(100% - 120px)" size="small" border stripe show-overflow-tooltip>
        <el-table-column prop="id" label="编号" align="center" />
        <el-table-column prop="title" label="标题" align="center">
            <template #default="{row}">
                <el-link type="primary" @click="info.open(row)">{{row.title}}</el-link>
            </template>
        </el-table-column>
        <el-table-column prop="content" label="内容" align="center" />
        <el-table-column prop="user.nickname" label="发布人" align="center" />
        <el-table-column prop="time" label="发布时间" align="center" />
        <el-table-column label="操作" align="center" width="160" fixed="right" v-if="user.info.role < 2">
            <template #default="{row}">
                <el-button type="warning" link icon="Edit" @click="dialog.open(1, row)">修改</el-button>
                <el-button type="danger" link icon="Delete" @click="remove(row.id)">删除</el-button>
            </template>
        </el-table-column>
    </el-table>
    <div class="pagination">
        <el-pagination background layout="prev, pager, next" :total="notice.total" small @current-change="notice.get(options)" v-model:current-page="options.pageNo" :page-size="options.pageSize" />
    </div>

    <el-dialog :title="dialog.type ? '修改公告' : '添加宿公告'" v-model="dialog.show" width="600px" @close="dialog.close" draggable>
        <el-form ref="formRef" :model="dialog.form" :rules="dialog.rules" v-loading="dialog.loading" label-width="80px">
            <el-form-item label="标题" prop="title">
                <el-input v-model="dialog.form.title" placeholder="请输入标题" :maxlength="32" clearable />
            </el-form-item>
            <el-form-item label="内容" prop="content">
                <el-input v-model="dialog.form.content" type="textarea" :rows="6" placeholder="请输入内容" clearable />
            </el-form-item>
        </el-form>
        <template #footer>
            <el-button type="primary" @click="submit">保存</el-button>
            <el-button @click="dialog.close">取消</el-button>
        </template>
    </el-dialog>

    <el-dialog title="公告详情" v-model="info.show" width="600px" @close="info.show = false" draggable>
        <el-form ref="formRef" :model="info.row" label-width="80px">
            <el-form-item label="标题">
                <el-input v-model="info.row.title" :maxlength="32" clearable disabled />
            </el-form-item>
            <el-form-item label="内容">
                <el-input v-model="info.row.content" type="textarea" :rows="6" disabled />
            </el-form-item>
        </el-form>
    </el-dialog>
</template>

<style scoped lang="less">

</style>